<template>
  <el-form
    ref="form"
    :model="form"
    :rules="rules"
    label-width="100px"
    class="ele-form-detail"
  >
    <div ref="printRef" class="demo-qrcode-images ele-bg-white">
      <div class="demo-qrcode-image-item">
        <ele-qr-code-svg :value="text" :size="120" />
      </div>
    </div>

    <div>
      <a :href="text" ></a>

    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>请在新窗口中完成微信小程序授权</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">已完成授权</el-button>
        <el-button @click="dialogVisible = false">遇到问题，点击重试</el-button>
      </span>
    </el-dialog>

    <el-form-item>
      <el-button type="primary" :loading="loading" @click="submit">
        下一步
      </el-button>
      <el-button class="hidden-xs-only" @click="back">上一步</el-button>
    </el-form-item>
  </el-form>
</template>



<script>
  import EleQrCode from 'ele-admin/es/ele-qr-code';
  import EleQrCodeSvg from 'ele-admin/es/ele-qr-code-svg';
  import { printElement } from 'ele-admin';
  // import { getAuthUrl } from '@/api/wxapp';

  const IMAGE_SRC = 'https://cdn.eleadmin.com/20200610/logo-radius.png';

  export default {
    name: 'StepConfirm',
    components: { EleQrCode,EleQrCodeSvg  },
    props: {
      data: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        // 是否显示授权弹窗
        dialogVisible: false,
        text: '',
        // 表单数据
        form: {
          password: '123456'
        },
        // 表单验证规则
        rules: {
          password: [
            {
              required: true,
              message: '请输入支付密码',
              trigger: 'blur'
            }
          ]
        },
        // 表单提交状态
        loading: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      onShowImageChange(checked) {
        if (checked) {
          this.image.src = IMAGE_SRC;
        } else {
          this.image.src = undefined;
        }
      },
      onCenterChange(checked) {
        if (checked) {
          this.image.x = undefined;
          this.image.y = undefined;
        } else {
          this.image.x = 0;
          this.image.y = 0;
        }
      },
      print() {
        printElement(this.$refs.printRef);
      },
      // 表单提交
      submit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.loading = true;
            setTimeout(() => {
              this.loading = false;
              this.$emit('done');
            }, 300);
          } else {
            return false;
          }
        });
      },
      back() {
        this.$emit('back');
      }
    },mounted() {
      getAuthUrl().then((msg) => {
        if(msg != null){
          this.dialogVisible = true;
          window.open(msg);
          this.text = msg;
        }
      }).catch((e) => {
        this.$message.error(e.message);
      });
     }
  };
</script>

<style lang="scss" scoped>
  .demo-qrcode-images {
    display: flex;
    padding-bottom: 16px;
    margin-bottom: 4px;
    position: sticky;
    top: 0;
    overflow: auto;
    z-index: 1002;

    .demo-qrcode-image-item {
      padding: 0 20px;

      .demo-qr-code-title {
        margin-bottom: 6px;
      }
    }
  }

  @media screen and (max-width: 768px) {
    .demo-qrcode-images .demo-qrcode-image-item {
      padding: 0 10px;
    }
  }
</style>

